<template>
  <div class="detail" v-if="detailInfo">
     <van-nav-bar
       :title=detailInfo.title
       left-arrow
       @click-left="onClickLeft"
     />
    <div class="mainImg">
      <img :src="detailInfo.imgUrl[0]" alt="">
    </div>
    <div class="mainInfo">
      <h2>{{ detailInfo.title }}</h2>
      <p class="location">
        <span>{{parseInt(Math.sqrt(Math.pow(detailInfo.location[0],2)+Math.pow(detailInfo.location[1],2)))}}km</span>
        <img src="../assets/img/位置 拷贝@2x(2).png" alt="">
        <em>{{ detailInfo.production }}</em>
      </p>
      <div class="saleInfo">
        <span>{{ detailInfo.unitPrice }}斤/元</span>
        <b>{{ detailInfo.buyWholesale }}斤起批</b>
        <em>{{ detailInfo.statusText }}</em>
      </div>
    </div>
    <div class="place">
      <p>发货地</p>
      <p>{{ detailInfo.production }}</p>
    </div>
    <div class="productAttr">
      <p>产品属性</p>
      <ul>
        <li v-for="item in detailInfo.describe.split('，')" :key="item">{{item}}</li>
      </ul>
    </div>
    <div class="description">{{detailInfo.productMessage}}</div>
    <div class="imgList">
      <img v-for="item in detailInfo.imgUrl" :key="item" :src="item" alt="">
    </div>
    <div class="statement">
      <p>
        内容声明：找好货为互联网信息服务提供商，找好货所展示的产品/服务的标题价格、详情等信息内容系由店铺经营者发布，其真实性和合法性均由发布商家负责。如您发现商家有任何违法/侵权信息，请立即向找好货举报。
      </p>
    </div>
    <div class="idInfo">
      <p>
        <span>产品编号: {{detailInfo.id}}</span>
        <em>询价时请将产品编号报给对方</em>
      </p>
    </div>
    <div class="addManifest">
      <van-action-bar>
        <van-action-bar-button color="#4CC79B" type="warning" text="加入进货单" @click="addManifest"/>
        <van-action-bar-button color="#4CC79B" type="danger" text="立即询价" />
      </van-action-bar>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { computed, onMounted, ref } from 'vue';
export default {
  props: {
    id: String,
  },
  setup(props){
    const store = useStore();
    const router = useRouter();
    const onClickLeft = () =>{
       router.go(-1);
    };
    const detailInfo = ref(null);
    const getDetail = async () => {
      await store.dispatch("detail/getDetail", props.id);
      // detailInfo = computed(() => store.state.detail.detailInfo);
      detailInfo.value = store.state.detail.detailInfo;
      console.log(detailInfo);
    }

    onMounted(() => {
      getDetail();
    })

    let productId = ref('');
    const addManifest = () => {
      productId.value=props.id;
      if(localStorage.getItem("productId")) {
        let productIdList = [...new Set(localStorage.getItem("productId").split(',').concat(productId.value))];
        localStorage.setItem("productId",productIdList.toString());
        router.push("/home/manifest");
        console.log(productIdList);
      }else {
        localStorage.setItem("productId",productId.value.toString());
        router.push("/home/manifest");
      }
    }

    return { getDetail, detailInfo, addManifest,onClickLeft };
  }
};
</script>
<style lang="scss" scoped>
.detail {
  background: #F8F8F8;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}

.mainImg img{
  width: 100%;
  height: 210px;
}

.mainInfo,.place,.productAttr,.description,.imgList,.statement,.idInfo {
  background: #fff;
  padding: 10px 15.5px;
  margin-bottom: 6px;
}
.mainInfo {
  .location {
    span,em {
      font-size: 10px;
      font-weight: 400;
      color: #aaa
    }
    img {
      display: inline-block;
      width: 6px;
      margin: 0 4px;
    }
  }

  .saleInfo {
    margin-top: 10px;
    margin-bottom: 10px;
    span {
      font-family: DIN;
      font-weight: bold;
      color: #FF6600;
    }
    b {
      background: #4CC79B;
      border-radius: 4px;
      font-size: 9px;
      line-height: 16px;
      color: #FFFFFF;
      display: inline-block;
      padding: 0 4px;
      margin: 0 5px;
    }
    em {
      border: 1px solid #4CC79B;
      border-radius: 4px;
      font-size: 9px;
      line-height: 16px;
      color: #4CC79B;
      padding: 0 4px;
      margin-right: 5px;
    }
  }
}

.place {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 13px;
  }
}

.productAttr {
  p {
    font-size: 13px;
  }
  ul {
    margin: 5px 0 10px;
    display: flex;
    li {
      width: 25%;
      border: 1px solid #D8D8D8;
      font-size: 11px;
      font-weight: 400;
      text-align: center;
      &:nth-child(odd) {
        background: #F4F4F4;
      }
    }
  }
}

.description {
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
}

.imgList img{
  width: 100%;
  margin-bottom: 10px;
}

.statement p{
  background: #F4F4F4;
  border-radius: 8px;
  padding: 12px 8px;
  font-size: 11px;
  color: #999999;
  line-height: 15px;
}

.idInfo {
  padding-bottom: 50px;
  p {
    display: flex;
    justify-content: space-between;

    span {
      font-size: 13px;
      line-height: 20px;
    }
    em {
      font-size: 13px;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
  }
}

.addManifest .van-action-bar {
  padding: 0 15.5px;
  .van-action-bar-button--first {
    opacity: 0.7;
  }
}
</style>